<template>
  <div class="login-container">
    <div>
      <img class="logo" src="@/assets/login/logo.png" />
    </div>
    <div class="login_bg">
      <div class="login">
        <h2 class="title">四川华西绿舍ICPS系统</h2>
        <el-form ref="loginForm" size="small" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号" name="username" type="text" tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin">
              <i slot="prefix" :style="istyle" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码" name="password" type="password" tabindex="2" autocomplete="on" @keyup.enter.native="handleLogin">
              <i slot="prefix" :style="istyle" class="el-icon-s-goods"></i>
            </el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-checkbox size="mini" v-model="loginForm.checked">记住密码</el-checkbox>
          </el-form-item>-->
        </el-form>
        <div class="input">
          <el-button type="primary" :loading="loading" round @click="handleLogin()">登录</el-button>
          <!-- <el-button type="primary" :loading="loading" round @click="APPtoBack()">测试APP返回</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  setToken,
  setUserId,
  setUserInfo
} from '@/utils/auth';
import {
  login
} from './pages';
export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不能少于6位数"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "123456",
        type: 1,
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      loading: false,
    };
  },
  computed: {
    istyle() {
      return "font-size: 20px;padding: 14px 10px 0 10px;";
    }
  },
  /**  销毁enter事件*/
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          login(this.loginForm).then(res => {
            if (res.code == 1001) {
              setToken(res.data.userToken.accessToken)
              setUserId(res.data.userToken.accessToken)
              setUserInfo(res.data.userToken)
              this.$router.push({
                name: "pages",
              });
              setTimeout(() => {
                this.loading = false;
              }, 200);
            } else {
              this.loading = false;
            }

          })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss">
.login-container {
  .el-input__inner {
    border-radius: 24px;
    line-height: 48px !important;
    height: 48px !important;
  }
  .el-input--prefix .el-input__inner {
    padding-left: 46px;
  }
  .el-button {
    height: 48px !important;
    width: 100%;
    background: #028037;
  }
}
</style>
<style lang="scss" scoped>
.login_bg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: calc(100vh - 141px);
  padding: 0 132px;
  .login {
    width: 456px;
    height: 540px;
    background: #ffffff;
    padding: 57px;
    .title {
      text-align: center;
    }
    .forget {
      line-height: 19px;
      font-size: 14px;
      color: #999999;
    }
    .input {
      display: flex;
      justify-content: space-between;
      padding-top: 24px;
      input {
        height: 48px;
      }
    }
  }
}
</style>
